<template>
  <div class="page-container">
    <page-header
      zhTitle="联系我们"
      enTitle="Contact Us"
      :pageHeaderImage="pageHeaderImage"
    ></page-header>
    <div class="tartan-container" style="margin-top:0">
      <div class="tartan-item app-container">
        <h2 class="title">
          联系达坦
        </h2>
        <div>
          <div style="display:flex;">
            <div style="flex:1 0 0;margin-right:100px">
              <div>
                <div style="display:flex">
                  <div style="flex:3 0 0">
                    <div style="font-size:19px;padding:14px 0;color:#50565B">
                      姓名*
                    </div>
                    <el-input
                      style="width:90%"
                      placeholder="请输入您的姓名"
                      v-model="testSelect"
                    >
                    </el-input>
                  </div>
                  <div style="flex:2 0 0">
                    <div style="font-size:19px;padding:14px 0;color:#50565B">
                      手机号码*
                    </div>
                    <el-input
                      style="width:100%"
                      placeholder="请输入您的手机号"
                      v-model="testSelect"
                    >
                    </el-input>
                  </div>
                </div>
              </div>
              <div>
                <div style="font-size:19px;padding:14px 0;color:#50565B">
                  贵公司名称*
                </div>
                <el-input
                  style="width:100%"
                  placeholder="请输入您的公司名称"
                  v-model="testSelect"
                >
                </el-input>
              </div>

              <div>
                <div style="font-size:19px;padding:14px 0;color:#50565B">
                  电子邮箱*
                </div>
                <el-input
                  placeholder="请输入您的邮箱"
                  v-model="test"
                ></el-input>
              </div>
            </div>
            <div style="flex:1 0 0">
              <div style="font-size:19px;padding:14px 0;color:#50565B">
                相关说明*
              </div>
              <el-input :rows="6" type="textarea" v-model="testArea"></el-input>
              <div
                style="height:54px;margin-top:24px;display:flex;align-items:center"
              >
                <tartan-btn style="width:200px;height:100%;margin-right:10px"
                  >发送给我们</tartan-btn
                >
                <el-upload>
                  <img
                    height="44px"
                    src="../../../public/img/files.png"
                    alt=""
                  />
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tartan-container">
      <div class="tartan-item app-container" style="padding-top:20px">
        <h1 style="text-align:center;">
          <span style="color:rgb(140,150,160);margin-right:10px">联系</span
          ><span style="color:#004E81;">我们</span>
        </h1>
        <h2 style="text-align:center;margin:0">达坦能源科技(上海)有限公司</h2>
        <p style="text-align:center;margin-top:8px">
          需要了解更多的产品服务信息请联系
          <a
            style="text-decoration:none;color:#004e7e;font-weight:bold"
            href="mailto:INFO@TARTANSH.COM"
          >
            INFO@TARTANSH.COM
          </a>
        </p>
        <p style="text-align:center;margin-top:8px">
          <a
            style="text-decoration:none;color:#004e7e;font-weight:bold;font-style:italic;font-size:12px"
            href="tel:+86 021-55883282"
            >+86 021-55883282</a
          >
        </p>
        <div class="branches-info">
          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">达坦能源科技(上海)有限公司</a>
            </p>
            <p class="location">
              中国上海市杨浦区政立路497号
              <br />国正中心1号楼1807室
            </p>
            <p class="tels">
              咨询电话：
              <a href="tel:+86 021-55883282">+86 021-55883282</a>
            </p>
            <p class="tels">
              电话：
              <a href="tel:+86 021-55883282">+86 021-55883282</a>
            </p>
            <p class="tels">
              传真：
              <a href="tel:+86 021-55883282">+86 021-55883282</a>
            </p>
          </div>
          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">达坦能源科技加拿大总部</a>
            </p>
            <p class="location">
              1520, 101 - 6 Avenue SW, Calgary,
              <br />
              AB, Canada，T2P 3P4
            </p>
            <p class="tels">
              电话：
              <a href="tel:+1 587-3181388">+1 587-400-9666</a>
            </p>
          </div>
          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">达坦能源科技四川制造基地</a>
            </p>
            <p class="location">四川省成都市新都区高新技术产业园</p>
            <p class="tels">
              电话：
              <a href="tel:+86 825-2689698">+86 825-2689698</a>
            </p>
          </div>

          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">达坦能源科技阿尔伯塔制造基地</a>
            </p>
            <p class="location">
              AB T6B 3R 4003-53 Avenue Edmonton,
              <br />
              AB, Canada
            </p>
            <p class="tels">
              电话：
              <a href="tel:+1 780-463-3366">+1 780-463-3366</a>
            </p>
          </div>
          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">达坦能源集团加拿大维护基地</a>
            </p>
            <p class="location">
              1-54 East Lake Circle, Airdrie,
              <br />
              AB, Canada
            </p>
            <p class="tels">
              电话：
              <a href="tel:+1 403-9452533">+1 403-9452533</a>
            </p>
          </div>
          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">达坦能源科技Casper</a>
            </p>
            <p class="location">2327 Colman Circle Casper, WY 82601</p>
            <p class="tels">
              电话：
              <a href="tel:+1 307-265-6895">+1 307-265-6895</a>
            </p>
          </div>
          <div class="branch"></div>
          <div class="branch">
            <p class="name">
              <a href="javascript:void(0)">中加智慧能源研究中心</a>
            </p>
            <p class="location">
              江苏省无锡市滨湖区太湖新城金融三街置业大厦19楼
            </p>
            <p class="tels">
              电话：
              <a href="tel:+86 0510-881553595">+86 0510-88155359</a>
            </p>
          </div>
          <div class="branch"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from "../../components/PageHeader.vue";
import pageHeaderImage from "../../../public/img/bg_lxwm.png";
import TartanBtn from "../../components/TartanBtn.vue";
export default {
  name: "contactus",
  components: {
    PageHeader,
    TartanBtn,
  },
  data() {
    return { pageHeaderImage };
  },
  methods: {},
};
</script>
<style lang="scss">
.el-input {
  font-size: 20px;

  .el-input__inner {
    color: #004f7e;
    border-radius: 0;
    border: 1px solid #004f7e;
    height: 54px;
    padding: 0 7px;
  }
}
.el-textarea {
  font-size: 20px;
  .el-textarea__inner {
    color: #004f7e;
    border-radius: 0;
    border: 1px solid #004f7e;
    min-height: 54px;
    padding: 0 7px;
  }
}
.el-select-dropdown {
  border-radius: 0;

  margin-top: 0 !important;
  .el-select-dropdown__item {
    padding: 0 7px;
    font-size: 16px;
  }
  .popper__arrow {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
.branches-info {
  display: flex;
  margin: 40px 0;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  a {
    text-decoration: none;
    color: #004e7e;
    font-weight: bold;
  }
  .branch {
    width: 28%;
    min-width: 300px;
    margin: 20px 0;
    .name {
      margin: 0;
      font-size: 20px;

      a {
        padding-bottom: 1px;
        border-bottom: 1px solid #004e7e;
      }
    }
    .location {
      margin: 10px 0 15px;
      font-size: 14px;
      font-style: italic;
      font-weight: 600;
    }
    .tels {
      margin: 0;
      font-size: 14px;
      font-style: italic;
    }
  }
}
</style>
